<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>景点详情页</title>
    <link rel="stylesheet" href="../css/details.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1574448_rdf48hhk58i.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2.16/lib/index.css">

</head>
<style>

</style>

<body>
    <div class="container">
        <div class="head">
            <a href="scenic.html">
                <span class="iconfont icon-flow"></span>
            </a>
            <span class="product">景点详情</span>
        </div>
        <!-- 幻灯片开始 -->
        <div class="swipper-box">
            <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <img v-bind:src="details.swipeImg1" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img v-bind:src="details.swipeImg2" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img v-bind:src="details.swipeImg3" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img v-bind:src="details.swipeImg4" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img v-bind:src="details.swipeImg5" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 幻灯片结束 -->
        <!-- 通知栏 -->
        <div class="notice">
            <van-notice-bar v-bind:text="details.title" left-icon="volume-o" />
        </div>
        <!-- 通知栏 -->
        <!-- 标题 开始 -->
        <div class="describe">
            <p class="title">
                {{details.mainTitle}}
            </p>
            <p class="subtitle">
                {{details.subTitle}}
            </p>
            <p class="price"><span><em>￥{{details.tcPrice}}</em></span>/人起</p>
        </div>
        <!-- 标题 结束 -->
        <div class="servicebar">
            <span class="servicebar-title"><em>商家承诺</em></span>
            <span class="servicebar-item servicebar-item1">铁定成团</span>
            <span class="servicebar-item servicebar-item2">无自费</span>
            <span class="servicebar-item servicebar-item3">无购物</span>
        </div>
        <div class="travel-agency">
            <div class="agencyname">福建金桥国旅</div>
            <span class="travel-agency-item travel-agency-item1">用户体验&nbsp;<em>5.0&nbsp;高</em></span>
            <span class="travel-agency-item travel-agency-item2">服务响应&nbsp;<em>5.0&nbsp;高</em></span>
            <span class="travel-agency-item travel-agency-item3">纠纷解决&nbsp;<em>5.0&nbsp;高</em></span>

        </div>
        <div class="prddetail-group tab-group">
            <div class="tab mpg-flexbox mp-border-bottom" mp-role="tabContainer">
                <div class="tab-item mpg-flexbox-item mp-tab-active" mp-role="tabItem" data-href="timelineGroup">
                    行程简介
                </div>
                <div class="tab-item mpg-flexbox-item" mp-role="tabItem" data-href="feeGroup">费用说明</div>
                <div class="tab-item mpg-flexbox-item" mp-role="tabItem" data-href="useGroup">使用说明</div>
            </div>
        </div>
        <hr />
        <div class="mp-prddetail-group" id="timelineGroup" mp-role="tabContentItem" style="margin-top: 0;">
            <div class="mp-card-group">
                <div class="card">
                    <h3 class="module-title">行程亮点</h3>
                    <div class="card-content">
                        <p class="card-desc">
                            1.行程精华景点一价全含，轻轻松松游云顶！
                            <br>2.赠送保险，让您的旅游加一份安全保障！
                            <br>3.品质：轻松旅程全程纯玩，0购物0自费，享受真正的纯净之旅
                        </p>
                    </div>
                </div>
            </div>


            <div class="cost">
                <div class="title">费用须知</div>
                <ul class="frees-cost">
                    <li class="cost-title">费用包含</li>
                    <li class="clearfix">
                        <span class="cost-title">往返交通：</span>
                        <span>往返火车票(高铁)</span>
                    </li>
                    <li class="clearfix">
                        <span class="cost-title">当地用车：</span>
                        <span>当地空调旅行车（循环用车）</span>
                    </li>
                    <li class="clearfix">
                        <span class="cost-title">住宿：</span>
                        <span>行程所列酒店双标，如有特殊要求，请和同程客服联系</span>
                    </li>
                    <li class="clearfix">
                        <span class="cost-title">用餐：</span>
                        <span>团队标准用餐，2早餐2正餐,正餐标准10人一桌,正餐标准30元一人.中式餐或自助餐或特色餐，自由活动期间用餐请自理；如因自身原因放弃用餐，则餐费不退）。</span>
                    </li>
                    <li class="clearfix">
                        <span class="cost-title">门票：</span>
                        <span>行程中所含的景点首道大门票 武夷山天游峰、九曲竹筏漂流、虎啸岩、一线天</span>
                    </li>
                    <li class="clearfix">
                        <span class="cost-title">导游：</span>
                        <span>当地中文导游</span>
                    </li>
                    <li class="clearfix">
                        <span class="cost-title">接送：</span>
                        <span>接机/站服务：从武夷山高铁站集合，送至武夷山酒店，送机/站服务：从武夷山酒店集合，送至武夷山高铁站</span>
                    </li>
                    <li class="clearfix">
                        <span class="cost-title">其他：</span>
                        <span>此线路12成人可升级小包团，清明、五一、端午、中秋、国庆、春节期间除外，敬请知晓！</span>
                    </li>
                </ul>
                <ul class="frees-cost">
                    <li class="cost-title">费用不包含</li>
                    <li class="clearfix">
                        <span class="cost-title">交通:</span>
                        <span>所在城市到机场/车站的往返费用。</span>
                    </li>
                    <li class="clearfix">
                        <span class="cost-title">产品升级:</span>
                        <span>升级舱位、升级酒店、升级房型等产生的差价。</span>
                    </li>
                    <li class="clearfix">
                        <span class="cost-title">单房差:</span>
                        <span>单人入住须补单房差。</span>
                    </li>
                    <li class="clearfix">
                        <span class="cost-title">保险:</span>
                        <span>建议购买旅游意外险（请在下一步中选择您需要的保险类型）。</span>
                    </li>
                    <li class="clearfix">
                        <span class="cost-title">自费项目:</span>
                        <span>行程中注明需要另行支付的自费景点。</span>
                    </li>
                    <li class="clearfix">
                        <span class="cost-title">补充:</span>
                        <span>因交通延阻、罢工、天气、飞机/火车机器故障、航班/车次取消或更改时间等不可抗力原因所引致的额外费用。</span>
                    </li>
                </ul>
                <hr />
                <div class="frees-child"><span>儿童价说明</span> <span
                        class="child-cot">儿童标准价：儿童价特殊说明1.2米—1.5米之间（不含1.5米）费用包含当地用车、导游服务费、半价正餐、九曲溪竹筏漂流、往返儿童高铁二等座票、儿童景点门票；儿童不占床则不含早，其余产生费用自理。1.5米及以上请按成人提交。</span>

                </div>
            </div>
            <div class="special-show-more">
                <p><img djm-project="gny" djm-position="Feature" djm-lineid="150453"
                        src="https://pic5.40017.cn/04/001/b9/15/rBTJUl287WiAXZHAAAWjw1kw0qI568_600x_02.jpg.webp"></p>
                <p><img djm-project="gny" djm-position="Feature" djm-lineid="150453"
                        src="https://pic5.40017.cn/04/001/88/69/rBTJUl2cUGqAe0cIAAJxDXOnPeg942_600x_02.jpg.webp"></p>
                <p><img djm-project="gny" djm-position="Feature" djm-lineid="150453"
                        src="https://pic5.40017.cn/04/001/87/b9/rBTJU12cUHuAJW3sAHdGReZG2Ts349_600x_02.jpg.webp"></p>
            </div>
            <!-- 底部导航 开始 -->
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服"></van-goods-action-icon>
                <van-goods-action-icon icon="cart-o" text="购物车"></van-goods-action-icon>
                <van-goods-action-button type="warning" text="加入订单"></van-goods-action-button>
                <van-goods-action-button type="danger" text="立即预定"></van-goods-action-button>
            </van-goods-action>
            <!-- 底部导航 结束 -->
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2.16/lib/vant.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../js/SHA1.js"></script>
    <script src="../js/api.js"></script>
    <script>
        var now = Date.now();
        var appKey = SHA1("A6022627784977" + "UZ" + "1E386085-8B0F-918B-D46A-C58FB0101477" + "UZ" + now) + "." + now;
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
        }
        var vm = new Vue({
            el: ".container",
            data: {
                details: {}
            },
            // created:function() {
            //     this.getData()
            // },
            mounted: function () {
                this.getData()
            },
            methods: {
                getData: function () {
                    var _this = this;
                    var params = {
                        where: {
                            id: getQueryVariable("id")
                        }
                    }
                    var url = 'https://d.apicloud.com/mcm/api/scenic?filter=' + JSON.stringify(params);
                    axios.get(url, {
                        headers: {
                            'X-APICloud-AppId': 'A6022627784977',
                            'X-APICloud-AppKey': appKey
                        }
                    })
                        .then(function (response) {
                            _this.details = response.data[0];
                            console.log(response);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },
        })
    </script>
</body>

</html>